<script lang="ts" setup>
import type { UnwrapRef } from 'vue';
import { message } from 'ant-design-vue';
import useUserStore from '@/store/modules/user';

const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
  },
  getVisible: {
    type: Function as PropType<() => void>,
    required: true,
  },
  getAllData: {
    type: Function as PropType<() => void>,
    required: true,
  },
});

interface FormState {
  account: number | undefined
  billmonth: string | undefined
  invoice: string | undefined
  amount: string | undefined
  printflag: string | undefined
  area: string | undefined
  created: string | undefined
  operator: string | undefined
}
const userstore = useUserStore();
const orgName = userstore.userOrgName;
const user = userstore.user;
// 获取当前时间，格式化为 YYYY-MM-DD
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split('T')[0]; // 仅获取日期部分
// 将格式从 YYYY-MM-DD 转换为 YYYYMMDD
const time = formattedDate.replace(/-/g, '');

const formState = reactive<UnwrapRef<FormState>>({
  account: undefined,
  billmonth: undefined,
  invoice: undefined,
  amount: undefined,
  printflag: undefined,
  area: undefined,
  created: time,
  operator: undefined,
});
const errors = reactive<Record<string, string>>({
  account: '',
  billmonth: '',
  invoice: '',
  amount: '',
  printflag: '',
});

const handleOk = async function () {
  Object.keys(errors).forEach((key) => {
    errors[key] = '';
  });

  let isValid = true;
  if (orgName !== '') {
    formState.area = orgName;
  }
  formState.operator = user.account;
  // 输入验证
  if (!formState.billmonth) {
    errors.billmonth = '专票周期不能为空';
    isValid = false;
  }
  if (!formState.amount) {
    errors.amount = '金额不能为空';
    isValid = false;
  }
  if (!formState.printflag) {
    errors.printflag = '请选择是否已打印';
    isValid = false;
  }
  if (!formState.area && orgName === '') {
    errors.area = '请输入分支局';
    isValid = false;
  }
  if (!formState.account && !formState.invoice) {
    errors.account = '合同号或专票流水号必选其一';
    errors.invoice = '合同号或专票流水号必选其一';
    isValid = false;
  }
  if (!isValid) {
    return; // 如果验证失败，不提交表单
  }
  try {
    await SingleUpload<FormState, FormState>(formState);
    Object.keys(formState).forEach((key) => {
      formState[key as keyof FormState] = undefined;
    });
    props.getAllData();
    message.success('新增记录成功');
  }
  finally {
    props.getVisible();
  }
};
function handleClose() {
  props.getVisible();
}

const labelCol = { span: 4 };
const wrapperCol = { span: 14 };
</script>

<template>
  <a-modal :visible="visible" title="新增专票记录" :closable="false">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="合同号" :validate-status="errors.account ? 'error' : ''" :help="errors.account">
        <a-input v-model:value="formState.account" />
      </a-form-item>
      <a-form-item label="专票周期" :validate-status="errors.billmonth ? 'error' : ''" :help="errors.billmonth">
        <a-input v-model:value="formState.billmonth" placeholder="专票周期需具体到月，例：202408" />
      </a-form-item>
      <a-form-item label="专票流水号" :validate-status="errors.invoice ? 'error' : ''" :help="errors.invoice">
        <a-input v-model:value="formState.invoice" />
      </a-form-item>
      <a-form-item label="金额" :validate-status="errors.amount ? 'error' : ''" :help="errors.amount">
        <a-input v-model:value="formState.amount" />
      </a-form-item>
      <a-form-item label="是否已打印" :validate-status="errors.printflag ? 'error' : ''" :help="errors.printflag">
        <a-select v-model:value="formState.printflag" placeholder="是否已打印">
          <a-select-option value="是">
            是
          </a-select-option>
          <a-select-option value="否">
            否
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="!orgName" label="分支局" :validate-status="errors.area ? 'error' : ''" :help="errors.area">
        <a-input v-model:value="formState.area" placeholder="请输入分支局" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="cancel" @click="handleClose">
        取消
      </a-button>
      <a-button key="ok" type="primary" @click="handleOk">
        确定
      </a-button>
    </template>
  </a-modal>
</template>
